<template>
  <div class="banner">
    <div class="banner-content">
      <slot name="title">
        <h1>默认标题</h1>
      </slot>

      <slot name="subtitle">
        <p>默认副标题</p>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.banner {
  background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 100%);
  color: #333;
  padding: 50px 20px;
  text-align: center;
  width: 100%;
}

.banner-content h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.banner-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}
</style>